<template>
  <div :class="wrapClasses" :style="formItemStyles">
    <!--label-->
    <label :class="labelClasses"
           :style="labelStyles"
           v-if="isShowLabel">
      <slot name="label">{{label}}</slot>
    </label>
    <div
      :class="classes"
      @click="handleClick"
      @drop.prevent="onDrop"
      @dragover.prevent="dragOver = true"
      @dragleave.prevent="dragOver = false">
      <input
        :id="elementId"
        :key="inputKey"
        ref="input"
        type="file"
        :class="[prefixCls + '-input']"
        @change="handleChange($event)"
        :multiple="multiple"
        :accept="accept" />
      <slot>
        <aty-button type="ghost" icon="ios-cloud-upload-outline">上传文件</aty-button>
      </slot>
    </div>
    <!--验证提示-->
    <div :class="errorTipClasses" :style="errorTipStyles" v-if="isShowMessage">{{validateMessage}}</div>
    <slot name="tip"></slot>
    <upload-list
      v-if="showUploadList"
      :files="fileList"
      @on-file-remove="handleRemove"
      @on-file-preview="handlePreview" />
  </div>
</template>
<script type="text/ecmascript-6"  src="./index.js"></script>
